<template>
	<view class="search-background">
		<custom-nav-bar></custom-nav-bar>
		<view class="blank"></view>
		<view class="search-list">
			<Line></Line>
			<view class="result" v-for="(item, index) in searchList" :key="index" @click="goPost(item.dishId)">
				<view class="result-content">
					<image :src="getImage(item.imageUrl)" mode="aspectFill" class="result-image"></image>
					<view class="result-count-info">
						<view class="result-counts">
							<uni-icons type="hand-up" color="#ffffff" size="18"></uni-icons>
							<text>{{ format(item.likes) }}</text>
						</view>
						<view class="result-counts">
							<uni-icons type="star" color="#ffffff" size="18"></uni-icons>
							<text>{{ format(item.favorites) }}</text>
						</view>
					</view>
					<view class="result-info">
						<view class="title">
							<up-text :lines="2" :text="item.name" size="16"></up-text>
						</view>
						<view class="user">
							<uni-icons type="person" color="#888" size="18"></uni-icons>
							<text>{{ item.username }}</text>
						</view>
						<view class="views">
							<uni-icons type="eye" color="#888" size="19"></uni-icons>
							<text>{{ format(item.views) }}</text>
						</view>
					</view>
				</view>
				<Line></Line>
			</view>
		</view>
		<up-gap height="10"></up-gap>
		<up-loadmore :line="true" status="nomore"></up-loadmore>
		<up-gap height="10"></up-gap>
		<up-back-top :scroll-top="scrollTop" :iconStyle="iconStyle" :customStyle="customStyle"></up-back-top>
	</view>
</template>

<script setup>
	import Line from '@/components/Line.vue'
	import {
		ref,
		createApp,
		onMounted,
		reactive
	} from 'vue';
	import {
		appUrl
	} from '../../main';
	import { onPageScroll } from '@dcloudio/uni-app';
	
	const format = (num) => {
		if (num >= 100000) {
			return Math.round(num / 10000) + "w"
		} else if (num >= 10000) {
			return (Math.round(num / 1000)) / 10 + "w"
		} else {
			return num
		}
	}
	
	const scrollTop = ref(0);
	const iconStyle = reactive({  
	  color: '#ffffff'  
	});  
	const customStyle = reactive({
	  background: '#FF4D4F'  
	}); 
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});

	const getImage = (path) => {
		return "https://xiaoxiaobaiyang.oss-cn-shenzhen.aliyuncs.com/food_moment_discover/train/data/" + path
	}

	const token = uni.getStorageSync("token");
	let searchList = ref([]);

	const getSearchList = async (content) => {
		try {
			uni.request({
				url: appUrl + '/dish/search',
				header: {
					'token': token
				},
				data: {
					content: content
				},
				method: "POST"
			}).then((res) => {
				if (res.data.status == 200) {
					searchList.value = res.data.data
				} else {
					console.log('服务异常');
				}
			})
		} catch (error) {
			console.error('请求失败:', error);
		}
	}

	const goPost = (id) => {
		uni.setStorageSync('dishId', id)
		uni.navigateTo({
			url: "/pages/PostView/PostView"
		})
	}

	onMounted(() => {
		uni.getStorage({
			key: 'storage_search',
			success: function(res) {
				getSearchList(res.data);
			}
		});
	})
</script>

<style lang="scss" scoped>
	.blank {
		height: 60rpx;
		background-color: ghostwhite;
		position: fixed;
		top: 70rpx;
		left: 0;
		width: 100%;
		z-index: 8;
	}

	.search-list {
		padding-top: 20rpx;
	}

	.result {
		border-radius: 12rpx;
		overflow: hidden;
		position: relative;

		.result-content {
			display: flex;
			align-items: center;
			padding: 20rpx;
			gap: 20rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;

			.result-count-info {
				position: absolute;
				bottom: 20rpx;
				right: 400rpx;
				display: flex;
				align-items: center;
				padding: 10rpx;
				background-color: rgba(0, 0, 0, 0);
				color: white;
				font-size: 13px;
				gap: 25rpx;

				.result-counts {
					display: flex;
					gap: 4rpx;
					align-items: center;
				}
			}
		}
	}


	.result-image {
		width: 100%;
		height: 250rpx;
		max-width: 380rpx;
		min-width: 380rpx;
		border-radius: 10rpx;
	}

	.result-info {
		.title {
			font-size: 16px;
			color: #333;
			height: 100rpx;
		}

		.user {
			display: flex;
			font-size: 14px;
			color: #999;
			gap: 10rpx;
			align-items: center;
		}

		.views {
			display: flex;
			font-size: 15px;
			color: #999;
			gap: 10rpx;
			align-items: center;
			padding-top: 10rpx;
		}
	}
</style>